<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 标题栏 -->
			<uni-nav-bar class="whereToGo-rank-nav-bar">
				<block slot="left">
					<icon type="" @click="testReq" class="fontIcon icon-back"></icon>
				</block>
				<view class="filter-item">
					<view class="filter-controller">西安</view>
				</view>
			</uni-nav-bar>
			<!-- 顶图 store 店铺  activity 活动-->
			<view class="whereToGo-rank-top-banner store"></view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block"></view>

		<!-- 店铺列表 -->
		<view class="store-card-list store-card-rank-list">
			<view class="store-card recommend">
				<view class="store-head supporter">
					<view class="head-sign">
						<icon type="" class="fontIcon icon-crown" />特别赞助
					</view>
				</view>
				<view class="item-info">
					<view class="name">
						<text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 第一名 -->
			<view class="store-card recommend">
				<view class="store-head first">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-fist" />
					</view>
				</view>
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 第二名 -->
			<view class="store-card recommend">
				<view class="store-head second">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-second" />
					</view>
				</view>
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 第三名 -->
			<view class="store-card recommend">
				<view class="store-head third">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-third" />
					</view>
				</view>
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 其它排名 -->
			<view class="store-card recommend">
				<view class="store-head">
					<view class="head-sign">
						<view class="normal-place-circle">4</view>
					</view>
				</view>
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 其它排名 -->
			<view class="store-card recommend">
				<view class="store-head">
					<view class="head-sign">
						<view class="normal-place-circle">5</view>
					</view>
				</view>
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 无名次显示 -->
			<view class="store-card">
				<view class="item-info">
					<view class="name"><text>黑胡桃木雪茄黑胡桃木雪茄黑</text>
						<icon type="" class="imgIcon icon-tobacco" />
					</view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 |
						<icon type="" class="fontIcon icon-address" />9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="img-grid nine">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>

			<!-- 店铺活动列表 -->
			<view class="store-activity-card recommend">
				<view class="wrap-header">
					<view class="store-head">
						<icon style="" class="imgIcon icon-store-activity-medal-fist" />
					</view>
					<view class="item-info">
						<view class="name"><text>黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄</text>
							<icon type="" class="imgIcon icon-tobacco" />
						</view>
						<view class="info-item">
							<view class="popularity-number">人气: 9999</view>
							<h-com-star></h-com-star>
						</view>
						<view class="info-item store-tag-list">
							<text class="store-tag strong-tag">高新区第一名</text>
							<text class="store-tag">威士忌</text>
							<text class="store-tag">有现场乐队</text>
							<text class="store-tag">雪茄烟</text>
							<text class="store-tag">白酒</text>
							<text class="store-tag">红酒</text>
							<text class="store-tag">饮料</text>
						</view>
					</view>
				</view>
				<view class="item-describe">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="describe-info">
						<view class="describe-title">新进会员充值活动</view>
						<view class="describe-content">新进会员充值优惠，充一万赠送三干！冲两万赠送八千！充值三万元赠送一万五！充值五万</view>
						<view class="describe-item"><text class="rmb-number">¥40</text>/人</view>
					</view>
				</view>
			</view>
			<view class="store-activity-card recommend">
				<view class="wrap-header">
					<view class="store-head">
						<icon style="" class="imgIcon icon-store-activity-medal-second" />
					</view>
					<view class="item-info">
						<view class="name"><text>黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄</text>
							<icon type="" class="imgIcon icon-tobacco" />
						</view>
						<view class="info-item">
							<view class="popularity-number">人气: 9999</view>
							<h-com-star></h-com-star>
						</view>
						<view class="info-item store-tag-list">
							<text class="store-tag strong-tag">高新区第一名</text>
							<text class="store-tag">威士忌</text>
							<text class="store-tag">有现场乐队</text>
							<text class="store-tag">雪茄烟</text>
							<text class="store-tag">白酒</text>
							<text class="store-tag">红酒</text>
							<text class="store-tag">饮料</text>
						</view>
					</view>
				</view>
				<view class="item-describe">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="describe-info">
						<view class="describe-title">新进会员充值活动</view>
						<view class="describe-content">新进会员充值优惠，充一万赠送三干！冲两万赠送八千！充值三万元赠送一万五！充值五万</view>
						<view class="describe-item"><text class="rmb-number">¥10</text>/人</view>
					</view>
				</view>
			</view>
			<view class="store-activity-card recommend">
				<view class="wrap-header">
					<view class="store-head">
						<icon style="" class="imgIcon icon-store-activity-medal-third" />
					</view>
					<view class="item-info">
						<view class="name"><text>黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄</text>
							<icon type="" class="imgIcon icon-tobacco" />
						</view>
						<view class="info-item">
							<view class="popularity-number">人气: 9999</view>
							<h-com-star></h-com-star>
						</view>
						<view class="info-item store-tag-list">
							<text class="store-tag strong-tag">高新区第一名</text>
							<text class="store-tag">威士忌</text>
							<text class="store-tag">有现场乐队</text>
							<text class="store-tag">雪茄烟</text>
							<text class="store-tag">白酒</text>
							<text class="store-tag">红酒</text>
							<text class="store-tag">饮料</text>
						</view>
					</view>
				</view>
				<view class="item-describe">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="describe-info">
						<view class="describe-title">新进会员充值活动</view>
						<view class="describe-content">新进会员充值优惠，充一万赠送三干！冲两万赠送八千！充值三万元赠送一万五！充值五万</view>
						<view class="describe-item"><text class="rmb-number">¥10</text>/人</view>
					</view>
				</view>
			</view>
			<view class="store-activity-card recommend">
				<view class="wrap-header">
					<view class="store-head">
						<view class="normal-place-circle">5</view>
					</view>
					<view class="item-info">
						<view class="name"><text>黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄</text>
							<icon type="" class="imgIcon icon-tobacco" />
						</view>
						<view class="info-item">
							<view class="popularity-number">人气: 9999</view>
							<h-com-star></h-com-star>
						</view>
						<view class="info-item store-tag-list">
							<text class="store-tag strong-tag">高新区第一名</text>
							<text class="store-tag">威士忌</text>
							<text class="store-tag">有现场乐队</text>
							<text class="store-tag">雪茄烟</text>
							<text class="store-tag">白酒</text>
							<text class="store-tag">红酒</text>
							<text class="store-tag">饮料</text>
						</view>
					</view>
				</view>
				<view class="item-describe">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="describe-info">
						<view class="describe-title">新进会员充值活动</view>
						<view class="describe-content">新进会员充值优惠，充一万赠送三干！冲两万赠送八千！充值三万元赠送一万五！充值五万</view>
						<view class="describe-item"><text class="rmb-number">¥10</text>/人</view>
					</view>
				</view>
			</view>
			<view class="store-activity-card">
				<view class="wrap-header">
					<view class="item-info">
						<view class="name"><text>黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木茄黑胡桃木雪茄</text>
							<icon type="" class="imgIcon icon-tobacco" />
						</view>
						<view class="info-item">
							<view class="popularity-number">人气: 9999</view>
							<h-com-star></h-com-star>
						</view>
						<view class="info-item store-tag-list">
							<text class="store-tag strong-tag">高新区第一名</text>
							<text class="store-tag">威士忌</text>
							<text class="store-tag">有现场乐队</text>
							<text class="store-tag">雪茄烟</text>
							<text class="store-tag">白酒</text>
							<text class="store-tag">红酒</text>
							<text class="store-tag">饮料</text>
						</view>
					</view>
				</view>
				<view class="item-describe">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="describe-info">
						<view class="describe-title">新进会员充值活动</view>
						<view class="describe-content">新进会员充值优惠，充一万赠送三干！冲两万赠送八千！充值三万元赠送一万五！充值五万</view>
						<view class="describe-item"><text class="rmb-number">¥10</text>/人</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		}
	},
	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		}
	}
}
</script>
